<template>
	<view class="orderlistbox">
		<view class="orderlist">
			我的订单
		</view>
		<u-subsection :list="list" :current="current" @change="sectionChange()"></u-subsection>
		<view class="orderlistcard">
			<scroll-view scroll-y="true" style="height: calc(100vh - 10% - 50px);" @scroll="scroll" :scroll-top="scrolltop">
				<view class="listcard" v-for="(item,index) in list1" :key="index">
					<view class="goods">
						<view class="goodsimg">
							<image class="goodsimgitem" src="../../static/logo.png" mode=""></image>
						</view>
						<view class="rightinfo">
							<view class="rightinfotop">
								<view class="timecard">
									{{item.time}}
								</view>
								<view class="timeorder">
									已完成
								</view>
							</view>
							<view class="rightinfocenter">

								<view class="timeorder">
									{{item.username}} {{item.phone}}
								</view>
								<view class="timeorder">
									{{item.address}}
								</view>
								<view class="timeordertime">
									￥12.20
								</view>
							</view>
						</view>
					</view>
				</view>

			</scroll-view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['全部订单', '进行中', '已完成'],
				// 或者如下，也可以配置keyName参数修改对象键名
				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				current: 0,
				list1: [{
						name: '苹果',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15:52:25',
						info: '棉服',
						username: '三十多岁',
						disabled: true
					},
					{
						name: '香蕉',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15:52:25',
						info: '棉服',
						username: '三十多岁',
						disabled: false
					},
					{
						name: '橙子',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15:52:25',
						info: '棉服',
						username: '三十多岁',
						disabled: false
					},
					{
						name: '榴莲',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15:52:25',
						info: '棉服',
						username: '三十多岁',
						disabled: false
					},
					{
						name: 's55',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15:52:25',
						info: '棉服',
						username: '三十多岁',
						disabled: false
					},
					{
						name: '香蕉',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15:52:25',
						info: '棉服',
						username: '三十多岁',
						disabled: false
					},
					{
						name: '橙子',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15:52:25',
						info: '棉服',
						username: '三十多岁',
						disabled: false
					},
					{
						name: '榴莲',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15:52:25',
						info: '棉服',
						username: '三十多岁',
						disabled: false
					},
					{
						name: 's55',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15:52:25',
						info: '棉服',
						username: '三十多岁',
						disabled: false
					},
					{
						name: '香蕉',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15:52:25',
						info: '棉服',
						username: '三十多岁',
						disabled: false
					},
					{
						name: '橙子',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15:52:25',
						info: '棉服',
						username: '三十多岁',
						disabled: false
					},
					{
						name: '榴莲',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15:52:25',
						info: '棉服',
						username: '三十多岁',
						disabled: false
					},
					{
						name: 's55',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15:52:25',
						info: '棉服',
						username: '三十多岁',
						disabled: false
					},
				],
				topNum: 0,
				scrolltop:0,
			}
		},
		methods: {
			sectionChange(index) {
				console.log(index, '、')
				this.current = index;
				wx.setStorageSync('changeorder', index)
				this.$nextTick(()=>{
					this.scrolltop = 0
				})
			},
			scroll(e) {
				this.scrolltop = e.target.scrollTop
				//console.log(e,this.scrolltop)
			},
		},

	
		onShow(options) {
			console.log(1, wx.getStorageSync('changeorder'))
			this.current = wx.getStorageSync('changeorder')
		},
		onHide() {
			console.log(2)
			wx.setStorageSync('changeorder', 0)
		}
	}
</script>

<style lang="less">
	.orderlistbox {
		width: 100%;
		height: 100vh;
	}

	.orderlist {
		width: 100%;
		height: 90px;
		display: flex;
		justify-content: center;

		line-height: 130px;
	}

	.orderlistcard {
		width: 100%;
		//background: palegoldenrod;
		height: calc(100vh - 10% - 50px);
		overflow: scroll;

		.listcard {
			width: 90%;

			margin: 0 auto;

			border-radius: 10px;

			.goods {
				width: 100%;
				height: 120px;
				margin-bottom: 10px;
				background: #fff;
				box-sizing: border-box;
				padding: 10px;
				display: flex;
				align-items: center;
				box-shadow: 0px 1px 1px 1px #ccc;
				border-radius: 10px;

				.goodsimg {

					margin-right: 10px;

					.goodsimgitem {
						width: 60px;
						height: 60px;
					}
				}

				.rightinfo {
					width: calc(100% - 70px);
					height: 100%;


					.rightinfotop {
						width: 100%;
						margin-bottom: 8px;
						display: flex;
						justify-content: space-between;
						font-size: 13px;
						.timecard{
							color: #ccc;
						}

						.timeorder {

							font-size: 13px;
							color: #919191;
							text-align: right;
						}
					}

					.rightinfocenter {
						width: 100%;

						.timeorder {
							width: 90%;
							font-size: 14px;
							color: #000;
							margin-bottom: 10px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.timeordertime {
							width: 100%;
							text-align: right;
							font-size: 14px;

						}
					}
				}
			}
		}
	}
</style>